export function createProcessLine (container) {
  if (!container.querySelector('#process-line')) {
    const line = document.createElement('div')
    line.id = 'process-line'
    container.prepend(line)
  }
}

export function updateProcessLine (container) {
  const line = container.querySelector('#process-line')
  const steps = container.querySelectorAll('.process-step')

  if (!line || steps.length === 0) return

  const firstStep = steps[0].getBoundingClientRect()
  const lastStep = steps[steps.length - 1].getBoundingClientRect()
  const containerRect = container.getBoundingClientRect()

  const startY = firstStep.top - containerRect.top + firstStep.height / 2
  const endY = lastStep.top - containerRect.top + lastStep.height / 2

  line.style.cssText = `
      position: absolute;
      left: 15px;
      top: ${startY}px;
      height: ${endY - startY}px;
      width: 1px;
      background: #b0b2b2;
      z-index: 1;
    `
}
